import React from 'react'

const CommentList = ({ comments, onDeleteComment }) => {
    return (
        <div className="comment-list-component">
            <p>评论列表
                <small className="text-muted">已有<span className="badge badge-info">{comments.length}</span>条留言</small>
            </p>
            <ul className="list-group mb-3">
                {
                    comments.map((comment, index) => 
                        <li key={index} className="list-group-item list-group-item-action d-flex justify-content-between align-items-center">{ comment } 
                            <span className="badge badge-danger" style={{ cursor:'pointer' }} data-index={index} onClick={onDeleteComment}>x</span>
                        </li>

                    )
                }
            </ul>
        </div>
    )
}

export default CommentList